{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block content %}
    <div id="content">

    <!-- Begin Page Content -->
    <div class="container-fluid">

        <!-- Page Heading -->
        <h1 class="h3 mb-2 text-gray-800">Ansible服务端管理</h1>

        <!-- 模态框 -->
        <div class="modal fade" id="anModal" tabindex="-1" role="dialog" aria-labelledby="anModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <!-- 模态框头部 -->
              <div class="modal-header">
                <h5 class="modal-title" id="anModalLabel">Ansible Master</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <!-- 模态框主体内容 -->
              <div class="modal-body">
                <form>
                  <div class="form-group d-flex align-items-center">
                    <label for="input1" class="mr-3 w-25"><span class="text-danger">*</span>&nbsp;名称</label>
                    <input type="text" class="form-control w-75" id="input1" placeholder="请输入名称">
                  </div>
                  <div class="form-group d-flex align-items-center">
                    <label for="input2" class="mr-3 w-25"><span class="text-danger">*</span>&nbsp;描述</label>
                    <input type="text" class="form-control w-75" id="input2" placeholder="请输入描述">
                  </div>
                  <div class="form-group d-flex align-items-center">
                    <label for="input4" class="mr-3 w-25"><span class="text-danger">*</span>&nbsp;SSH用户名</label>
                    <input type="text" class="form-control w-75" id="input4" placeholder="请输入已添加公钥认证的用户名">
                  </div>
                  <div class="form-group d-flex align-items-center">
                    <label for="input9" class="mr-3 w-25"><span class="text-danger">*</span>&nbsp;SSH端口</label>
                    <input type="text" class="form-control w-75" id="input9" placeholder="请输入SSH端口号">
                  </div>
                  <div class="form-group d-flex align-items-center">
                    <label for="input5" class="mr-3 w-25"><span class="text-danger">*</span>&nbsp;私钥</label>
                    <textarea id="input5" class="form-control" placeholder="请输入私钥" rows="15" style="resize: vertical; width: 75%;"></textarea>
                  </div>
                    <hr>
                    <div class="form-group d-flex align-items-center">
                    <label for="input8" class="mr-3 w-25"><span class="text-danger">*</span>&nbsp;分发文件路径</label>
                    <input type="text" class="form-control w-75" id="input8" placeholder="请输入分发文件路径">
                  </div>
                  <div style="display: none;">
                    <label for="input6" class="mr-3 w-25"></label>
                    <input type="text" class="form-control w-75" id="input6" placeholder="">
                  </div>
                </form>
                  <label class="mr-3 w-100"><span id="msg" class="text-danger"></span></label>
              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                  <button id="check_sftp" type="button" class="btn btn-success" onclick="check_dir_rw()">测试路径权限</button>
                <button type="button" class="btn btn-primary" onclick="create_an()">提交</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 确认模态框 -->
        <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <!-- 模态框头部 -->
              <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <!-- 模态框主体内容 -->
              <div class="modal-body">
                您确定要进行此操作吗？该操作无法撤销
              </div>
              <div class="modal-body">
                <label class="mr-3 w-100"><span id="confirm_msg" class="text-danger"></span></label>
              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmButton" onclick="del_an()">确认</button>
              </div>
            </div>
          </div>
        </div>
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <button id="add_salt" class="btn btn-primary btn-sm mr-2" onclick="clear_rowText()"> &nbsp;添&nbsp;加&nbsp; </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>描述</th>
                                <th>SSH用户名</th>
                                <th>SSH端口</th>
                                <th>分发文件路径</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>名称</th>
                                <th>描述</th>
                                <th>SSH用户名</th>
                                <th>SSH端口</th>
                                <th>分发文件路径</th>
                                <th>操作</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr style="display: none;">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            {% for each_master in all_masters %}
                            <tr id="tr-{{ each_master.id }}">
                                <td>{{ each_master.name }}</td>
                                <td>{{ each_master.description }}</td>
                                <td>{{ each_master.user }}</td>
                                <td>{{ each_master.sftp_port }}</td>
                                <td>{{ each_master.file_roots }}</td>
                                <td style="display: none;">{{ each_master.password }}</td>
                                <td style="display: none;">{{ each_master.id }}</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="get_rowText(this)" data-row-id="tr-{{ each_master.id }}">编辑</button>
                                    <button type="button" class="btn btn-danger btn-sm" onclick="get_rowid(this)" id="{{ each_master.id }}">删除</button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container-fluid -->
    <div id="load" class="position-fixed w-100 h-100"
     style="top: 0; left: 0; background: rgba(255, 255, 255, 0.2); z-index: 1100; display: none;
            justify-content: center;
            align-items: center;">
        <div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem; position: absolute; top: 50%; left: 50%; margin-top: -1.5rem; margin-left: -1.5rem;">
        <span class="sr-only">加载中...</span>
    </div>
{% endblock content %}
{% block js %}
    <script type="text/javascript">
        // 设置加载图片
        function loading() {
            document.getElementById('load').style.display = 'flex';
        };

        // 移除加载图片
        function loading_remove() {
            document.getElementById('load').style.display = 'none';
        };

        // 移除reminder
        function reminder_remove() {
            var reminder_msg = document.getElementById("msg");
            reminder_msg.innerHTML = '';
        };

        //创建ansible
        function create_an() {
            reminder_remove()
            var reminder_msg = document.getElementById("msg");
            $.ajax({
                type: "post",
                url: "/create_salt/",
                dataType: "json",
                data: {
                    input1: $("#input1").val(),
                    input2: $("#input2").val(),
                    input4: $("#input4").val(),
                    input5: $("#input5").val(),
                    input8: $("#input8").val(),
                    input6: $("#input6").val(),
                    input9: $("#input9").val(),
                    input10: $("#input10").val(),
                    input11: $("#input11").val(),
                    master_type: 1,
                },
                complete: function () {
                },
                success: function (data) {
                    if (data.status === 0) {
                        reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                        $('#anModal').modal('hide');
                        location.reload();
                    } else {

                        reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    reminder_msg.innerHTML = 'Reminder: ' + errorThrown;
                }
            });
        }

        // 点击删除按钮时设置确认按钮的
        function get_rowid(button) {
                reminder_remove();
                // 设置确认按钮的 data-id 属性
                document.querySelector('#confirmButton').setAttribute('data-id', button.id);

                // 显示确认框
                $('#confirmModal').modal('show');
        }

        // 编辑按钮时填充内容
        function get_rowText(button) {
                reminder_remove();
                const rowId = button.getAttribute('data-row-id');
                const row = document.getElementById(rowId);
                const name = row.querySelector('td:nth-child(1)').textContent;
                const description = row.querySelector('td:nth-child(2)').textContent;
                const user = row.querySelector('td:nth-child(3)').textContent;
                const sftp_port = row.querySelector('td:nth-child(4)').textContent;
                const file_roots = row.querySelector('td:nth-child(5)').textContent;
                const password = row.querySelector('td:nth-child(6)').textContent;
                const id = row.querySelector('td:nth-child(7)').textContent;

                document.querySelector('#input1').value=name;
                document.querySelector('#input2').value=description;
                document.querySelector('#input4').value=user;
                document.querySelector('#input5').value="";
                document.querySelector('#input8').value=file_roots;
                document.querySelector('#input6').value=id;
                document.querySelector('#input9').value=sftp_port;

                // 显示确认框
                $('#anModal').modal('show');
            };

        // 添加时清空内容
        function clear_rowText() {
                reminder_remove();

                document.querySelector('#input1').value="";
                document.querySelector('#input2').value="";
                document.querySelector('#input4').value="";
                document.querySelector('#input5').value="";
                document.querySelector('#input6').value="";
                document.querySelector('#input8').value="";
                document.querySelector('#input9').value="";

                // 显示确认框
                $('#anModal').modal('show');
            };

        //检查目录权限
        function check_dir_rw() {
            reminder_remove()
            loading()
            var reminder_msg = document.getElementById("msg");
            $.ajax({
                type: "post",
                url: "/check_dir_perm/",
                dataType: "json",
                data: {
                    input8: $("#input8").val(),
                },
                complete: function () {
                },
                success: function (data) {
                    loading_remove();
                    reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    loading_remove();
                    reminder_msg.innerHTML = 'Reminder: ' + errorThrown;
                }
            });
        }

        //删除ansible
        function del_an() {
            reminder_remove()
            var reminder_msg = document.getElementById("confirm_msg");
            $.ajax({
                type: "post",
                url: "/del_salt/",
                dataType: "json",
                data: {
                    salt_id: document.querySelector('#confirmButton').getAttribute('data-id'),
                },
                complete: function () {
                },
                success: function (data) {
                    if (data.status === 0) {
                        reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                        $('#confirmModal').modal('hide');
                        location.reload();
                    } else {

                        reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    reminder_msg.innerHTML = 'Reminder: ' + errorThrown;
                }
            });
        }
    </script>
{% endblock %}